※這裡看上一篇文章↝ [DAY0]30天挑戰從零開始設計並實作網頁

在介紹主要使用工具前，先來說明這次挑戰訂定的基礎目標：

• 以網路書店為例，製作簡單的登入、登出，以及加入購物車等功能
• 實現RWD（響應式網頁）
• 使用React框架
• 加入Spinner

有機會實現的進階目標：

• 一些酷酷的外掛
• 規劃FireStore資料庫
• 加入PWA
• 自製Lottie動畫

希望至少是做得完基礎目標啦 ಥ_ಥ

接下來是介紹我使用的設計工具 - Figma
點擊前往Figma

Figma是一個使用者在操作設計及Prototype輸出體驗都相當良好的軟體，製作網頁及App等視覺稿都非常便利，除了不用安裝可以在瀏覽器上直接操作外，其及時的協作功能也讓小組在開發上更加效率，此外，也提供許多外掛程式的應用，使整體的功能更為強大。
/
在程式碼撰寫方面我使用的編輯器是Visual Studio Code
點擊前往下載Visual Studio Code

Visual Studio Code支援非常多的程式語言，內建程式碼自動補全及重構功能，以及在編輯器內就可以運行終端機及除錯，此外，大量的擴充套件使其功能更加全面與完整，在個人化設定也具有很大的彈性，對大部分使用者來說是相當優秀的開發環境。
/
最後，網站部署則是使用Vercel
點擊前往Vercel

Vercel支援許多框架的部署，且流量不高時不需要收費，非常適合個人在網站撰寫練習時使用，同時，它可以和Github進行連動，即時的部署使用者在Github上更新的內容，在使用者體驗上相當流暢。

工具篇就到此告一個段落，更多詳細的套件會在實作時進行說明，然後這邊稍微打個預防針，本次挑戰主要是針對作者本身的練習，很多部分不一定完善，大家看看參考一下就好
那就網頁設計篇見嘍！

※這裡看下一篇文章↝[DAY2]歸納網頁需求及製作網站架構圖